<template>
<!--表格区-->
  <h1 align="center">VIP私教预约总表</h1>
  <div>
  <el-table :data="privates" style="width: 100%" class="data-grid" stripe border  @row-click="tblRowClick" ref="tblRef">
    <el-table-column type="selection" width="50"></el-table-column>
    <el-table-column prop="id" label="预约记录ID"></el-table-column>
    <el-table-column prop="coachName" label="教练姓名" ></el-table-column>
    <el-table-column prop="courseName" label="课程名称" ></el-table-column>
    <el-table-column prop="memberName" label="学员姓名" ></el-table-column>
  </el-table>
  </div>
<!-- 按钮区-->
<!--  弹窗区-->
  <!-- 分页条 -->
  <div class="pagination">
    <el-pagination
        v-model:current-page="privatesPi.pageNo"
        v-model:page-size="privatesPi.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="privatesPi.total"
        class="privates-pi"
        background
        @change="privatesPiChange"
    />
  </div>
</template>
<script setup >
import {onMounted, reactive, ref} from 'vue'
import api from "@/util/api";
onMounted(() => {
  search();
});
let privatesPi = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0
});
//当页码或页面大小改变时触发
function privatesPiChange(pageNo, pageSize) {
  //console.log(pageNo, pageSize);
  search(pageNo, pageSize);
}
//表格对象
let tblRef = ref();
//表格行单击事件
function tblRowClick(row) {
  tblRef.value.toggleRowSelection(row);
}
let privates=ref([
  {
    coachName: null,
    courseName: null,
    memberName: null,
    id: null
  }
])

async  function search(pageNo=1,pageSize=20){
    let resp=await api({
      url:"/reservations",
      method:"get",
      params:{
        pageNo,
        pageSize
      }
    })
  console.log(resp);
  privates.value=resp.data.records;
  privatesPi.pageNo = resp.data.current;
  privatesPi.pageSize = resp.data.size;
  privatesPi.total = resp.data.total;
}
</script>